<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3新增属性</title>
    <style>
        p:nth-of-type(1){
            text-shadow: 0 0 2px #000;
        }
        div:nth-of-type(1){
            width: 120px;
            color:#f00;
            word-wrap: break-word;
        }
        div:nth-of-type(2){
            width: 120px;
            color:#f00;
            word-break: break-all;
        }
        div:nth-of-type(3){
            width: 120px;
            color:#f00;
            word-break: keep-all;
        }
        div:nth-of-type(4){
            width: 200px;
            height: 120px;
            border: 1px solid red;
            background: url(cc.gif) no-repeat;
            padding: 10px;
            background-origin: padding-box;
            background-size:auto;
        }
        div:nth-of-type(5){
            width: 300px; 
            height: 300px;
            border: 18px solid #fff;
            border-image: url(borderimage.png);
            border-image-slice: 18 18 18 18;
            border-image-repeat: round;
        }
        div:nth-of-type(6){
            width: 156px; 
            height: 30px;
            border: 16px solid;
            border-image: url(bvbbbb.jpg);
            border-image-slice: 9 15 14 16;
            border-image-repeat:stretch;
        }
        input:nth-of-type(1){
            width: 156px; 
            border: 16px solid;
            border-image: url(bvbbbb.jpg);
            outline: none;
            border-image-slice: 9 15 14 16;
            border-image-repeat:stretch;
        }
    </style>
</head>
<body>
    <p>hello world !</p>
    <div>adfa adfafasdfas sflja;dflkasdnca;dfnasdkfhweifo hehe</div>
    <div>adfa adfafasdfas sflja;dflkasdnca;dfnasdkfhweifo hehe</div>
    <div>adfa adfafasdfas sflja;dflkasdn-ca;dfnasdkfhweifo hehe</div>
    <div><img src="cc.gif" alt=""></div>
    <div></div>
    <div>你好</div>
    <input type="text">
</body>
</html>